<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: #ddd;
            text-align: center
        }

        .list {
            display: inline-block;
            margin-top: 20px;
            padding: 40px;
            border-radius: 8px;
            background: #fff;
            color: #333;
            text-align: left;
            font-size: 13px
        }

        .list-ul {
            list-style: none;
            margin: 0;
            padding: 0
        }

        .list-option {
            padding: 6px 0;
        }

        .list-input {
            width: 300px;
            border: 1px solid #ccc;
            padding: 4px;
            font-size: 14px;
            color: #333
        }

        .list-input:hover {
            background: #effaff
        }

        .list-btn span {
            color: #0065A0;;
            cursor: pointer
        }

        .list-btn span:hover {
            text-decoration: underline
        }

        .list-btn b {
            text-align: center;
            background-color: #D6EDFF;
            border-radius: 6px;
            width: 20px;
            height: 20px;
            display: inline-block;
            margin: 0 2px;
            cursor: pointer;
            color: #238FCE;
            border: 1px solid #B3DBF8;
            float: left
        }

        .list-bottom {
            margin-top: 5px
        }

        .list-add-show {
            color: #f60;
            cursor: pointer
        }

        .list-add-show:before {
            position: relative;
            top: 1px;
            margin-right: 5px;
            content: "+";
            font-weight: 700;
            font-size: 16px;
            font-family: arial
        }

        .list-add-show span:hover {
            text-decoration: underline
        }

        .list-add-area {
            margin-top: 5px
        }

        .list-add-add {
            cursor: pointer;
            margin-left: 5px
        }

        .list-add-cancel {
            cursor: pointer;
            margin-left: 4px
        }

        .list-add-input {
            width: 180px;
            border: 1px solid #ccc;
            padding: 4px;
            font-size: 14px;
            color: #333
        }

        .list-add-input:hover {
            background: #effaff
        }

        .list-tmp {
            display: none
        }

        .list-hide {
            display: none
        }
    </style>
    <script>
        window.onload = function () {
            function SmartList(prefix, defList) {
                Find.prototype.prefix = prefix;
                var find = new Find(document.getElementsByClassName(prefix)[0]);
                var list = new List(find.className('option'));
                for (var i = 0; i < defList.length; i++) {
                    list.add(defList[i]);
                }
                var add = {
                    'show': find.className('add-show'),
                    'area': find.className('add-area'),
                    'input': find.className('add-input'),
                    'add': find.className('add-add'),
                    'cancel': find.className('add-cancel')
                };
                add.show.onclick = function () {
                    add.area.classList.remove(prefix + '-hide');
                    console.log(add.area.classList);
                    console.log(add.area.className);

                }
                add.add.onclick = function () {
                    if (add.input.value != "") {
                        list.add(add.input.value);
                    } else {
                        add.input.focus();
                        alert("添加数据不能位空");
                    }
                }
                add.cancel.onclick = function () {
                    add.area.classList.add(prefix + '-hide');

                }
            };

            function Find(obj) {
                this.obj = obj;
            };

            //设置对象属性
            Find.prototype.prefix = "";
            Find.prototype.className = function (className) {
                return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];
            };
            //添加向上的对象属性
            Find.prototype.prev = function () {
                //获取当前元素的上一个节点
                var node = this.obj.previousSibling;
                while (node) {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        break;
                    }
                    node = node.previousSibling;
                }
                return node;
            }
            Find.prototype.next = function () {
                var node = this.obj.nextSibling;
                while (node) {
                    //判断节点是否为1获取属性节点(2) 元素节点(1)获取文本节点(3)获取注释节点(8)
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        break;
                    }
                    node = node.nextSibling;
                }
                return node;
            }

            // Find.prototype.prefix="list";
            // var find = new Find(document.getElementsByClassName(prefix)[0]);
            // console.log(find.className('up'));
            function List(tmp) {
                this.tmp = tmp;
                this.obj = tmp.parentNode;
                this.obj.removeChild(tmp);
            }

            List.prototype.add = function (value) {
                //复制节点
                var tmp = this.tmp.cloneNode(true);
                //1.将value添加到list-input的value的属性中去
                var find = new Find(tmp);
                find.className("input").value = value;

                //2.为list-up(上移)添加单击事件
                var obj = this.obj;//获取ul对象
                find.className('up').onclick = function () {
                    var prev = find.prev();
                    if (prev) {
                        obj.insertBefore(tmp, prev);
                    } else {
                        alert("已经是第一个了")
                    }
                }
                //3.为list-down(下移)添加单击事件
                find.className('down').onclick = function () {
                    var next = find.next();
                    if (next) {
                        obj.insertBefore(next, tmp);
                    } else {
                        alert("已经是最后一个了")
                    }
                }
                //4.为lisr-del(删除)添加单击事件
                find.className("del").onclick = function () {
                    if (confirm("你确定要删除吗?")) {
                        console.log(tmp);
                        obj.removeChild(tmp);
                    }
                }
                //5.将创建的节点添加至列表末尾
                this.obj.appendChild(tmp);
            }
            // window["SmartList"] = SmartList;
            SmartList('list', ['PHP', 'Javascript']);
        }

    </script>
</head>
<body>
<form>
    <div class="list">
        <ul class="list-ul">
            <li class="list-option">
                <input class="list-input" type="text" name="list[]">
                <span class="list-btn">
              <span class="list-up">[上移]</span>
              <span class="list-down">[下移]</span>
              <span class="list-del">[删除]</span>
            </span>
            </li>
        </ul>
        <div class="list-bottom">
            <span class="list-add-show"><span>添加项目</span></span>
            <div class="list-add-area list-hide">
                添加到列表：
                <input class="list-add-input" type="text" name="list[]">
                <input class="list-add-add" type="button" value="添加">
                <input class="list-add-cancel" type="button" value="取消">
            </div>
        </div>
    </div>
</form>

</body>
</html>